home *** CD-ROM | disk | FTP | other *** search
/ InterCD 2001 May / may_2001.iso / intercd / root / Html / ^CutePage / data1.cab / IE4Gadget_Template / coolbuttons.js < prev    next >
Encoding:
Text File  |  2000-05-12  |  7.0 KB  |  264 lines
  1. ///////////////////////////////////////////////////////////////////////
  2. //     This Button Script was designed by Erik Arvidsson for WebFX   //
  3. //                                                                   //
  4. //     For more info and examples see: http://www.eae.net/webfx/     //
  5. //     or send mail to erik@eae.net                                  //
  6. //                                                                   //
  7. //     Feel free to use this code as lomg as this disclaimer is      //
  8. //     intact.                                                       //
  9. ///////////////////////////////////////////////////////////////////////
  10.  
  11. document.onmouseover = doOver;
  12. document.onmouseout  = doOut;
  13. document.onmousedown = doDown;
  14. document.onmouseup   = doUp;
  15.  
  16.  
  17. function doOver() {
  18.     var toEl = getReal(window.event.toElement, "className", "coolButton");
  19.     var fromEl = getReal(window.event.fromElement, "className", "coolButton");
  20.     if (toEl == fromEl) return;
  21.     var el = toEl;
  22.     
  23.     var cDisabled = el.getAttribute("cDisabled");
  24.     cDisabled = (cDisabled != null); // If CDISABLED atribute is present
  25.     
  26.     if (el.className == "coolButton")
  27.         el.onselectstart = new Function("return false");
  28.     
  29.     if ((el.className == "coolButton") && !cDisabled) {
  30.         makeRaised(el);
  31.         makeGray(el,false);
  32.     }
  33. }
  34.  
  35. function doOut() {
  36.     var toEl = getReal(window.event.toElement, "className", "coolButton");
  37.     var fromEl = getReal(window.event.fromElement, "className", "coolButton");
  38.     if (toEl == fromEl) return;
  39.     var el = fromEl;
  40.  
  41.     var cDisabled = el.getAttribute("cDisabled");
  42.     cDisabled = (cDisabled != null); // If CDISABLED atribute is present
  43.  
  44.     var cToggle = el.getAttribute("cToggle");
  45.     toggle_disabled = (cToggle != null); // If CTOGGLE atribute is present
  46.  
  47.     if (cToggle && el.value) {
  48.         makePressed(el);
  49.         makeGray(el,true);
  50.     }
  51.     else if ((el.className == "coolButton") && !cDisabled) {
  52.         makeFlat(el);
  53.         makeGray(el,true);
  54.     }
  55.  
  56. }
  57.  
  58. function doDown() {
  59.     el = getReal(window.event.srcElement, "className", "coolButton");
  60.     
  61.     var cDisabled = el.getAttribute("cDisabled");
  62.     cDisabled = (cDisabled != null); // If CDISABLED atribute is present
  63.     
  64.     if ((el.className == "coolButton") && !cDisabled) {
  65.         makePressed(el)
  66.     }
  67. }
  68.  
  69. function doUp() {
  70.     el = getReal(window.event.srcElement, "className", "coolButton");
  71.     
  72.     var cDisabled = el.getAttribute("cDisabled");
  73.     cDisabled = (cDisabled != null); // If CDISABLED atribute is present
  74.     
  75.     if ((el.className == "coolButton") && !cDisabled) {
  76.         makeRaised(el);
  77.     }
  78. }
  79.  
  80.  
  81. function getReal(el, type, value) {
  82.     temp = el;
  83.     while ((temp != null) && (temp.tagName != "BODY")) {
  84.         if (eval("temp." + type) == value) {
  85.             el = temp;
  86.             return el;
  87.         }
  88.         temp = temp.parentElement;
  89.     }
  90.     return el;
  91. }
  92.  
  93. function findChildren(el, type, value) {
  94.     var children = el.children;
  95.     var tmp = new Array();
  96.     var j=0;
  97.     
  98.     for (var i=0; i<children.length; i++) {
  99.         if (eval("children[i]." + type + "==\"" + value + "\"")) {
  100.             tmp[tmp.length] = children[i];
  101.         }
  102.         tmp = tmp.concat(findChildren(children[i], type, value));
  103.     }
  104.     
  105.     return tmp;
  106. }
  107.  
  108. function disable(el) {
  109.  
  110.     if (document.readyState != "complete") {
  111.         window.setTimeout("disable(" + el.id + ")", 100);    // If document not finished rendered try later.
  112.         return;
  113.     }
  114.     
  115.     var cDisabled = el.getAttribute("cDisabled");
  116.     
  117.     cDisabled = (cDisabled != null); // If CDISABLED atribute is present
  118.  
  119.     if (!cDisabled) {
  120.         el.setAttribute("cDisabled", "true");
  121.         
  122.         el.innerHTML = '<span style="background: buttonshadow; width: 100%; height: 100%; text-align: center;">' +
  123.                         '<span style="filter:Mask(Color=buttonface) DropShadow(Color=buttonhighlight, OffX=1, OffY=1, Positive=0); height: 100%; width: 100%%; text-align: center;">' +
  124.                         el.innerHTML +
  125.                         '</span>' +
  126.                         '</span>';
  127.  
  128.         if (el.onclick != null) {
  129.             el.cDisabled_onclick = el.onclick;
  130.             el.onclick = null;
  131.         }
  132.     }
  133. }
  134.  
  135. function enable(el) {
  136.     var cDisabled = el.getAttribute("cDisabled");
  137.     
  138.     cDisabled = (cDisabled != null); // If CDISABLED atribute is present
  139.     
  140.     if (cDisabled) {
  141.         el.removeAttribute("cDisabled");
  142.         el.innerHTML = el.children[0].children[0].innerHTML;
  143.  
  144.         if (el.cDisabled_onclick != null) {
  145.             el.onclick = el.cDisabled_onclick;
  146.             el.cDisabled_onclick = null;
  147.         }
  148.     }
  149. }
  150.  
  151. function addToggle(el) {
  152.     var cDisabled = el.getAttribute("cDisabled");
  153.     
  154.     cDisabled = (cDisabled != null); // If CDISABLED atribute is present
  155.     
  156.     var cToggle = el.getAttribute("cool_toogle");
  157.     
  158.     cToggle = (cToggle != null); // If CTOGGLE atribute is present
  159.  
  160.     if (!cToggle && !cDisabled) {
  161.         el.setAttribute("cToggle", "true");
  162.         
  163.         if (el.getAttribute("value") == null)
  164.             el.setAttribute("value", 0);        // Start as not pressed down
  165.         
  166.         if (el.onclick != null)
  167.             el.cToggle_onclick = el.onclick;    // Backup the onclick
  168.         else 
  169.             el.cToggle_onclick = "";
  170.  
  171.         el.onclick = new Function("toggle(" + el.id +"); " + el.id + ".cToggle_onclick();");
  172.     }
  173. }
  174.  
  175. function removeToggle(el) {
  176.     var cDisabled = el.getAttribute("cDisabled");
  177.     
  178.     cDisabled = (cDisabled != null); // If CDISABLED atribute is present
  179.     
  180.     var cToggle = el.getAttribute("cToggle");
  181.     
  182.     cToggle = (cToggle != null); // If CTOGGLE atribute is present
  183.     
  184.     if (cToggle && !cDisabled) {
  185.         el.removeAttribute("cToggle");
  186.  
  187.         if (el.value) {
  188.             toggle(el);
  189.         }
  190.  
  191.         makeFlat(el);
  192.         
  193.         if (el.cToggle_onclick != null) {
  194.             el.onclick = el.cToggle_onclick;
  195.             el.cToggle_onclick = null;
  196.         }
  197.     }
  198. }
  199.  
  200. function toggle(el) {
  201.     el.value = !el.value;
  202.     
  203.     if (el.value)
  204.         el.style.background = "URL(/webfx/images/tileback.gif)";
  205.     else
  206.         el.style.backgroundImage = "";
  207.  
  208. //    doOut(el);    
  209. }
  210.  
  211.  
  212. function makeFlat(el) {
  213.     with (el.style) {
  214.         background = "";
  215.         border = "1px solid buttonface";
  216.         padding      = "1px";
  217.     }
  218. }
  219.  
  220. function makeRaised(el) {
  221.     with (el.style) {
  222.         borderLeft   = "1px solid buttonhighlight";
  223.         borderRight  = "1px solid buttonshadow";
  224.         borderTop    = "1px solid buttonhighlight";
  225.         borderBottom = "1px solid buttonshadow";
  226.         padding      = "1px";
  227.     }
  228. }
  229.  
  230. function makePressed(el) {
  231.     with (el.style) {
  232.         borderLeft   = "1px solid buttonshadow";
  233.         borderRight  = "1px solid buttonhighlight";
  234.         borderTop    = "1px solid buttonshadow";
  235.         borderBottom = "1px solid buttonhighlight";
  236.         paddingTop    = "2px";
  237.         paddingLeft   = "2px";
  238.         paddingBottom = "0px";
  239.         paddingRight  = "0px";
  240.     }
  241. }
  242.  
  243. function makeGray(el,b) {
  244.     var filtval;
  245.     
  246.     if (b)
  247.         filtval = "gray()";
  248.     else
  249.         filtval = "";
  250.  
  251.     var imgs = findChildren(el, "tagName", "IMG");
  252.         
  253.     for (var i=0; i<imgs.length; i++) {
  254.         imgs[i].style.filter = filtval;
  255.     }
  256.  
  257. }
  258.     
  259.  
  260. document.write("<style>");
  261. document.write(".coolBar    {background: buttonface;border-top: 1px solid buttonhighlight;    border-left: 1px solid buttonhighlight;    border-bottom: 1px solid buttonshadow; border-right: 1px solid buttonshadow; padding: 2px; font: menu;}");
  262. document.write(".coolButton {border: 1px solid buttonface; padding: 1px; text-align: center; cursor: default;}");
  263. document.write(".coolButton IMG    {filter: gray(); vertical-align: top;}");
  264. document.write("</style>");